<template>
  <div>
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
    <el-backtop target=".el-main" ref="backtop" />
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick, computed } from "vue";
// 父组件获取的数据
let props = defineProps({
  limit: {
    type: Number, //类型字符串
    default: 20, //如果没有传递msg参数,默认值是这个
  },
  total: {
    type: Number, //类型字符串
    default: 0, //如果没有传递msg参数,默认值是这个
  },
});
const backtop = ref(); //跳转顶部的
// 自定义事件
let emit = defineEmits(["changeReq"]);

// 传给父组件的数据
let page = ref(1); //默认为1
let limit = ref(props.limit);
/**
 * 计算属性：总页数
 */
const pages = computed(() => Math.ceil(props.total / limit.value));

watch([page, limit], () => {
  if (page.value <= pages.value) {
    emit("changeReq", { page: page.value, limit: limit.value });
    nextTick(() => {
      backtop.value.$el.click?.();
    });
  }
});
// watch()
</script>

<style></style>
